<template>
  <div class="instructions-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <div class="header-icon">
            <Icon icon="ep:document" />
          </div>
          <div class="header-info">
            <h1 class="page-title">知识库管理</h1>
            <p class="page-subtitle">管理和组织您的文档知识库</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button
            v-hasPermi="['system:doc-group:create']"
            type="primary"
            @click="addGroup('create')"
            class="create-btn"
          >
            <Icon icon="ep:plus" class="btn-icon" />
            创建知识库
          </el-button>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-wrapper">
      <!-- 标签页 -->
      <div class="tabs-section">
        <el-tabs v-model="activeName" class="knowledge-tabs">
          <el-tab-pane name="first">
            <template #label>
              <div class="tab-label">
                <Icon icon="ep:folder-opened" />
                <span>公共文档</span>
              </div>
            </template>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 知识库网格 -->
      <div class="knowledge-grid-container">
        <el-scrollbar class="grid-scrollbar">
          <div v-if="list.length > 0" class="knowledge-grid">
            <div v-for="item in list" :key="item.id" class="knowledge-card">
              <div class="card-header">
                <div class="card-title-section">
                  <div class="knowledge-icon">
                    <svg
                      t="1721703357297"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      width="20"
                      height="20"
                    >
                      <path
                        d="M184.797556 1023.984039a107.051063 107.051063 0 0 1-77.235738-33.518299A111.440364 111.440364 0 0 1 73.069892 909.782405V63.844379a63.844379 63.844379 0 0 1 63.844379-63.844379h750.171458a63.844379 63.844379 0 0 1 63.844379 63.844379v960.155621zM136.914271 816.777106v86.349523a50.022071 50.022071 0 0 0 47.883285 51.809714h702.288173v-189.937029H184.797556a50.00611 50.00611 0 0 0-47.883285 51.777792z m448.043893-304.856911A46.781969 46.781969 0 0 0 631.708211 558.638319h175.572043a46.781969 46.781969 0 0 0 46.734086-46.734086A46.79793 46.79793 0 0 0 807.280254 465.154187H631.708211a46.79793 46.79793 0 0 0-46.750047 46.750046z m0-207.494233A46.781969 46.781969 0 0 0 631.708211 351.144086h175.572043a46.781969 46.781969 0 0 0 46.734086-46.734085A46.79793 46.79793 0 0 0 807.280254 257.659954H631.708211a46.79793 46.79793 0 0 0-46.766008z"
                        fill="#347ED5"
                      ></path>
                    </svg>
                  </div>
                  <h3 @click="toDetail(item.id, item.name)" class="knowledge-title">
                    {{ item.name }}
                  </h3>
                </div>
                <div class="card-actions">
                  <el-popover
                    placement="bottom"
                    :width="66"
                    trigger="click"
                    :popper-style="{ padding: '10px 0', 'min-width': '68px' }"
                  >
                    <template #reference>
                      <div
                        class="action-trigger"
                        v-hasPermi="['system:doc-group:update', 'system:doc-group:delete']"
                      >
                        <el-icon size="14" color="#666"><MoreFilled /></el-icon>
                      </div>
                    </template>
                    <div class="action-menu">
                      <el-button
                        text
                        bg
                        @click="addGroup('update', item.id)"
                        class="menu-item edit-item"
                        v-hasPermi="['system:doc-group:update']"
                      >
                        编辑
                      </el-button>
                      <el-button
                        text
                        bg
                        @click="delGroup(item.id)"
                        v-hasPermi="['system:doc-group:delete']"
                        class="menu-item delete-item"
                      >
                        删除
                      </el-button>
                    </div>
                  </el-popover>
                </div>
              </div>

              <div class="card-body">
                <div v-if="item.childrenList?.length > 0" class="document-list">
                  <div
                    v-for="doc in item.childrenList.slice(0, 3)"
                    :key="doc.id"
                    @click="toDetail(item.id, item.name, doc.id)"
                    class="document-item"
                  >
                    <div class="doc-info">
                      <div class="doc-bullet"></div>
                      <div class="doc-content">
                        <span class="doc-name">{{ doc.name }}</span>
                        <span class="doc-time">{{ formatDate(doc.createTime) }}</span>
                      </div>
                    </div>
                  </div>

                  <div v-if="item.childrenList.length > 3" class="more-docs">
                    <span class="more-text">还有 {{ item.childrenList.length - 3 }} 个文档...</span>
                  </div>
                </div>

                <div v-else class="empty-state">
                  <div class="empty-icon">
                    <Icon icon="ep:document-copy" />
                  </div>
                  <p class="empty-text">此知识库暂无内容</p>
                </div>
              </div>

              <div class="card-footer">
                <div class="footer-stats">
                  <span class="stat-text">{{ item.childrenList?.length || 0 }} 个文档</span>
                </div>
                <div class="footer-action">
                  <el-button
                    type="primary"
                    text
                    @click="toDetail(item.id, item.name)"
                    class="view-btn"
                  >
                    查看详情
                  </el-button>
                </div>
              </div>
            </div>
          </div>

          <!-- 空状态 -->
          <div v-else class="empty-knowledge">
            <div class="empty-illustration">
              <Icon icon="ep:folder-add" class="empty-main-icon" />
            </div>
            <h3 class="empty-title">暂无知识库</h3>
            <p class="empty-description">创建您的第一个知识库，开始管理文档</p>
            <el-button type="primary" @click="addGroup('create')" class="create-first-btn">
              <Icon icon="ep:plus" class="btn-icon" />
              创建知识库
            </el-button>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>

  <!-- 表单弹窗：添加/修改 -->
  <DocGroupForm ref="addDocumentFormRef" @success="getList" />
  <DocsForm ref="formRef" @success="getList" />
</template>

<script lang="ts" setup>
import * as DocGroupApi from '@/api/system/docgroup'
import * as DocsApi from '@/api/system/docs'
import DocGroupForm from './components/DocGroupForm.vue'
import { formatDate } from '@/utils/formatTime'
import DocsForm from './components/DocsForm.vue'
import { MoreFilled, Edit, Delete, Plus } from '@element-plus/icons-vue'

defineOptions({ name: 'Instructions' })

const message = useMessage()
const { t } = useI18n()
const activeName = ref('first')
const loading = ref(true)
const list = ref([])

// 添加/修改知识库操作
const addDocumentFormRef = ref()
const addGroup = (type: string, id?: number) => {
  addDocumentFormRef.value.open(type, id)
}

// 去知识库详情
const { push } = useRouter()
const toDetail = (id, name, hasDocId) => {
  push({
    path: '/user/instructions-detail',
    query: {
      id,
      name,
      hasDocId
    }
  })
}

// 删除知识库
const delGroup = async (id: number) => {
  try {
    await message.delConfirm()
    await DocGroupApi.deleteDocGroup(id)
    message.success(t('common.delSuccess'))
    await getList()
  } catch {}
}

// 查询知识库列表
const getList = async () => {
  loading.value = true
  try {
    const data = await DocGroupApi.getDocGroupPage()
    list.value = data.list
  } finally {
    loading.value = false
  }
}

// 监听知识库数组变化
watch(list, (newList) => {
  newList.map((item) => {
    DocsApi.getDocsPage({
      groupId: item.id
    }).then((res) => {
      item.childrenList = res.list
    })
  })
})

// 初始化
onMounted(async () => {
  await getList()
})

// keep-alive 激活时
onActivated(async () => {
  await getList()
})
</script>

<style scoped lang="scss">
.instructions-container {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  padding: 20px;
  box-sizing: border-box;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #97a5e2 0%, #7db5db 100%);
  border-radius: 16px;
  padding: 12px 24px;
  margin-bottom: 20px;
  color: white;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
  }
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  backdrop-filter: blur(10px);
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.page-subtitle {
  font-size: 14px;
  margin: 0;
  opacity: 0.9;
}

.create-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.2s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
  }

  .btn-icon {
    margin-right: 6px;
  }
}

/* 内容区域 */
.content-wrapper {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  height: calc(100% - 120px);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
}

/* 标签页 */
.tabs-section {
  padding: 20px 24px 0;
  border-bottom: 1px solid rgba(0, 82, 204, 0.1);
}

.knowledge-tabs {
  :deep(.el-tabs__header) {
    margin-bottom: 0;
  }

  :deep(.el-tabs__nav-wrap::after) {
    display: none;
  }

  :deep(.el-tabs__item) {
    font-weight: 500;
    color: #6b7280;

    &.is-active {
      color: #0052cc;
      font-weight: 600;
    }
  }

  :deep(.el-tabs__active-bar) {
    background: linear-gradient(90deg, #0052cc 0%, #1d4ed8 100%);
    height: 3px;
  }
}

.tab-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 知识库网格 */
.knowledge-grid-container {
  padding: 20px;
}

.grid-scrollbar {
  height: calc(100vh - 280px);
}

.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* 知识库卡片 */
.knowledge-card {
  background: white;
  border-radius: 16px;
  border: 1px solid rgba(0, 82, 204, 0.1);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  height: 268px;
  display: flex;
  flex-direction: column;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 82, 204, 0.15);
    border-color: rgba(0, 82, 204, 0.2);
  }
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 82, 204, 0.1);
  background: linear-gradient(135deg, rgba(0, 82, 204, 0.02) 0%, transparent 100%);
}

.card-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.knowledge-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.knowledge-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  cursor: pointer;
  transition: color 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &:hover {
    color: #0052cc;
  }
}

.card-actions {
  flex-shrink: 0;
}

.action-trigger {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: rgba(0, 82, 204, 0.1);
  }
}

.action-menu {
  display: flex;
  flex-direction: column;

  .menu-item {
    width: 100%;
    margin: 0;
    border-radius: 0;
    justify-content: flex-start;

    &.edit-item:hover {
      background: rgba(16, 185, 129, 0.1);
      color: #10b981;
    }

    &.delete-item:hover {
      background: rgba(239, 68, 68, 0.1);
      color: #ef4444;
    }
  }
}

/* 卡片主体 */
.card-body {
  padding: 16px 20px;
  flex: 1;
  overflow: hidden;
}

.document-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.document-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 8px;
  border-radius: 6px;

  &:hover {
    background: rgba(0, 82, 204, 0.05);
    transform: translateX(4px);
  }
}

.doc-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.doc-bullet {
  width: 5px;
  height: 5px;
  background: #909399;
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
}

.doc-content {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.doc-name {
  font-size: 14px;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.doc-time {
  font-size: 12px;
  color: #9ca3af;
  margin-left: 10px;
  flex-shrink: 0;
}

.more-docs {
  text-align: center;
  padding: 8px;
  color: #6b7280;
  font-size: 13px;
  border-top: 1px dashed rgba(0, 82, 204, 0.2);
  margin-top: 8px;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  height: 100%;
}

.empty-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #9ca3af;
  margin-bottom: 12px;
}

.empty-text {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

/* 卡片底部 */
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: rgba(0, 82, 204, 0.02);
  border-top: 1px solid rgba(0, 82, 204, 0.1);
}

.stat-text {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

.view-btn {
  font-size: 13px;
}

/* 全局空状态 */
.empty-knowledge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  height: 100%;
}

.empty-main-icon {
  font-size: 80px;
  color: #d1d5db;
  margin-bottom: 24px;
}

.empty-title {
  font-size: 20px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 8px 0;
}

.empty-description {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 24px 0;
}

.create-first-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;

  .btn-icon {
    margin-right: 6px;
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .knowledge-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .instructions-container {
    padding: 12px;
  }

  .page-header {
    padding: 20px;
    margin-bottom: 16px;
  }

  .header-content {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .knowledge-grid {
    grid-template-columns: 1fr;
  }

  .grid-scrollbar {
    height: calc(100vh - 240px);
  }
}

/* 保持原有的深度选择器样式 */
:deep(.is-icon-close) {
  display: none;
}

:deep(.is-horizontal) {
  display: none;
}

:deep(.el-button.is-text:not(.is-disabled).is-has-bg) {
  background-color: #fff;
  border-radius: 0;
}

:deep(.el-button.is-text:not(.is-disabled).is-has-bg:hover) {
  background-color: #e9efff;
  color: #4f81fc;
  border-radius: 0;
}
</style>
